<template>
  <div class="wrapper">
    <v-chart :options="options"></v-chart>
  </div>
</template>

<script>
import axios from '@/utils/request'
export default {
  components: {},
  props: {},
  data () {
    return {
      options: {}
    }
  },
  watch: {},
  computed: {},
  methods: {
    initCharts () {
      let url = '/api/hq/dashboard/all/material/total/sumqty'
      if (this.totalType === 'month') url += '?totalType=0'
      else if (this.totalType === 'quarterly') url += '?totalType=1'
      else url += '?totalType=2'
      axios.get(url)
        .then(res => {
          console.log(res)
        })
        .catch(err => {
          console.log(err)
        })
      this.options = {
        tooltip: {
          trigger: 'axis',
          formatter: (v) => {
            const list = []
            list.push(v[0].name + '')
            let listItem = []
            v.map(item => {
              const _value = Math.abs(item.value)
              const _name = item.seriesName
              const _color = item.color
              list.push(`
                <span style='background-color:${_color};display:inline-block;width:8px;height:9px;border-radius:50%;margin-right:3px'></span>
                <span style='margin-right:5px'>${_name}</span>
                <span>${_value}</span>
              `)
            })
            listItem = list.join('<br/>')
            return `<div>${listItem}</div>`
          },
          axisPointer: { // 坐标轴指示器，坐标轴触发有效
            type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
          }
        },
        legend: {
          data: ['溢/缺数', '按设备部数2班满员数'],
          x: 'left',
          orient: 'vertical',
          top: '70px',
          itemGap: 30,
          icon: 'none'
        },
        grid: {
          left: '15%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        xAxis: [
          {
            type: 'category',
            axisTick: {
              show: false
            },
            axisLine: {
              lineStyle: {
                color: 'yellow'
              }

            },
            data: ['鞍钢总院', '阳煤总院', '攀钢长寿', '西电医院', '成都五冶', '中铁西安', '烟台海港', '攀钢密地', '邯郸岭北', '十九冶', '中铁芜湖', '上海中冶', '阳煤三院', '中铁华洲']
          }
        ],
        yAxis: [
          {
            type: 'value',
            axisLabel: { show: false },
            axisTick: { show: false },
            axisLine: { show: false }
          }
        ],
        series: [
          {
            name: '溢/缺数',
            type: 'bar',
            stack: '总量',
            barWidth: 30,
            label: {
              show: true
            },
            emphasis: {
              focus: 'series'
            },
            data: ['', 11, '', '', '', '', '', '', '', '', 18, '', '', 33]
          },
          {
            name: '按设备部数2班满员数',
            type: 'bar',
            stack: '总量',
            barWidth: 30,
            label: {
              show: false,
              position: ['0%', '50%'],
              color: '#fff'
            },
            emphasis: {
              focus: 'series'
            },
            data: [-153, -85, -18, -45, -212, -100, -100, -100, -100, -100, -100, -100, -100, -100]
          }
        ]
      }
    }
  },
  created () { },
  mounted () {
    this.initCharts()
  }
}
</script>
<style lang="scss" scoped>
.wrapper {
  height: 300px;
  width: 100%;
}
</style>
